<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<h1>{{title}}</h1>
			<!-- 7.使用父组件 -->
			<parent></parent>
		</div>
	</body>
	<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
	<!-- 1.创建子组件的模板 -->
	<template id="c">
		<div>
			这是一个{{title}}的容器
		</div>
	</template>
	
	<!-- 3.创建父组件的模板 -->
	<template id="p">
		<div>
			<h2>这是一个{{title}}的容器</h2>
			<!-- 8.使用子组件 -->
			<child></child>
		</div>
	</template>
	
	<script type="text/javascript">
		// 2.创建子组件对象
		let child = {
			data:()=>{
				return {
					title:"子组件"
				}
			},
			// 查找对应的组件模板
			template: "#c"
		}
		// 4.创建父组件对象
		let parent = {
			data:()=>{
				return {
					title:"父组件"
				}
			},
			// 查找对应的组件模板
			template: "#p",
			// 6.注册子组件
			components:{
				child:child
			}
		}
		
		
		const vm1 = new Vue({
		    el:"#app",
			data:{
				title:"测试父子组件"
			},
			// 5.注册父组件
			components:{
				parent
			}
		});
	</script>
</html>
